<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="Real Estate Builders Free Responsive Website Templates - icon">
	<meta name="author" content="webThemez.com">
	<title>欢迎来到拴马桩</title>
	<link rel="favicon" href="assets/images/favicon.png">
	<link rel="stylesheet" media="screen" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
	<link rel="stylesheet" href="assets/css/bootstrap.min.css">
	<link rel="stylesheet" href="assets/css/font-awesome.min.css">
	<!-- Custom styles for our template -->
	<link rel="stylesheet" href="assets/css/bootstrap-theme.css" media="screen">
	<link rel="stylesheet" type="text/css" href="assets/css/isotope.css" media="screen" />
	<link rel="stylesheet" href="assets/js/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="assets/css/style.css">
	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
	<script src="assets/js/html5shiv.js"></script>
	<script src="assets/js/respond.min.js"></script>
	<![endif]-->
	  <link rel="shortcut icon" href="Imperial/assets/img/logo.php">
	<link href="assets/css/detail.css" rel="stylesheet">
	<link href="assets/css/personalDetail.css" rel="stylesheet">
	<link href="assets/css/layui.css" rel="stylesheet">
	<link rel="stylesheet" th:href="@{/webjars/layui/2.5.7/css/layui.css}">
	<link rel="stylesheet" href="assets/css/ShoppingCart.css">
	<script th:src="@{/webjars/layui/2.5.7/layui.js}"></script>
	<script th:src="@{/webjars/jquery/3.6.0/dist/jquery.js}"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body style="background-color:#eeeeee!important">
	<!-- Fixed navbar -->
	<div th:replace="~{commons/commons::topbar(active='projects')}"></div>
	<!-- /.navbar -->

	<header id="head" class="secondary">
		<div class="container">
			<div class="row">
				<div class="col-sm-8">
					<h1>Our Projects</h1>
				</div>
			</div>
		</div>
	</header>
	<br>

	<br>

	<div th:replace="~{commons/commons::menunav(selected='projects')}"></div>
	<div id="app">
		<div class="mycss" align="center">
			<div style="padding:50px; float: left;font-size: 25px;" >
				<b>我的名字</b>
				<div class="layui-input-inline">
					<input type="text" id="bname"  v-bind:value=person.name autocomplete="off"  class="layui-input">
				</div>
				<button  onclick="changeName()" class="layui-btn" style="background-color: rgb(255, 130, 47)">修改</button>
			</div>
		</div>
		<div class="mycss" align="center">
			<div style="padding:50px; float: left;font-size: 25px;" >
				<b>我的邮箱</b>
				<div class="layui-input-inline">
					<input type="text" v-bind:placeholder=person.email autocomplete="off" readonly class="layui-input">
				</div>
				<button class="layui-btn" style="background-color: rgb(255, 130, 47)"><a href="/changeEmail" style="text-decoration: none ;color: white">修改邮箱</a></button>
			</div>
		</div>
		<div class="mycss" align="center">
			<div style="padding:50px; float: left;font-size: 25px;" >
				<b>修改密码</b>
				<button class="layui-btn" style="background-color: rgb(255, 130, 47)"><a href="/changePwd" style="text-decoration: none ;color: white">修改密码</a></button>
			</div>
		</div>
		<div class="mycss" align="center">
			<div style="padding:50px; float: left;font-size: 25px;" v-if="bank.length==0">
				<b>我的银行卡</b>
<!--				<span class="layui-btn" style="background-color: rgb(255, 130, 47)" v-if="bank!=''">已绑定</span>-->
				<span class="layui-btn" style="background-color: rgb(255, 130, 47)" type="button" v-else><a href="/bindBank" style="color: #fafafa;text-decoration: none">绑定银行卡</a></span>
			</div>
			<div style="padding:50px; float: left;font-size: 25px;" v-else>
				<b>我的余额</b>
				<div class="layui-input-inline">
					<input type="text" autocomplete="off" id="pmonry" readonly class="layui-input" v-bind:placeholder="bank[0].money+'元'">
				</div>
				<div id="layerDemo" style="position: absolute;right: 627px;bottom: -64.3px">
					<div class="layui-btn-container" style="margin-top: 30px;">
						<button class="layui-btn" style="background-color: rgb(255, 130, 47)" data-method="notice" type="button">充值</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<footer id="footer">

		<div class="footer2">
			<div class="container">
				<div class="row">

					<div class="col-md-6 panel">
						<div class="panel-body">
							<p class="simplenav">
<!--								<a href="index.html">Home</a> |-->
<!--								<a href="about.html">About</a> |-->
<!--								<a href="services.html">Services</a> |-->
<!--								<a href="price.html">Price</a> |-->
<!--								<a href="projects.html">Projects</a> |-->
<!--								<a href="contact.html">Contact</a>-->
							</p>
						</div>
					</div>

					<div class="col-md-6 panel" >
						<div class="panel-body">
							<p class="text-right">
								Copyright &copy; 2021. Template by Shuanmazhuang
							</p>
						</div>
					</div>

				</div>
				<!-- /row of panels -->
			</div>
		</div>
	</footer>
</body>
</html>
<script>
	function changeName(){
		$.post({
			url:'/changeName',
			data: {
				"name" : $("#bname").val(),
			},
			success:function (data) {
				if(data==""){
				}else{
					$("#cname").text($("#bname").val());
					layui.use('layer',function () {
						layer.msg(data);
					})
				}
			}
		})
	}
	let app = new Vue({
		el:'#app',
		data:({
			person:null,
			bank:[]
		}),
		created:function () {
			this.cartView();
			this.getBank();
		},
		methods:({
			cartView : function (){
				let that =this;
				$.ajax({
					url:'/showmsg',
					success:function (res) {
						that.person=res;
					}
				})
			},
			getBank : function () {
				let that =this;
				$.ajax({
					url:'/getBank',
					success:function (res) {
						that.bank=res;
						console.log(that.bank)
					}
				})
			},

		})
	})
	layui.use('layer', function(){ //独立版的layer无需执行这一句
		var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

		//触发事件
		var active = {
			notice: function(){
				//示范一个公告层
				layer.open({
					type: 1
					,title: false //不显示标题栏
					,closeBtn: false
					,area: '600px;'
					,shade: 0.8
					,id: 'LAY_layuipro' //设定一个id，防止重复弹出
					// ,btn: ['确定', '取消']
					,btnAlign: 'c'
					,moveType: 1 //拖拽模式，0或者1
					,content: '<div>'+'<span class="layui-layer-setwin" ><a class="layui-layer-ico layui-layer-close layui-layer-close1" href="javascript:;"></a></span>' +
							'<form style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;" id="app">' +
							'<div class="layui-inline">' +
							'<label class="layui-form-label" style="width: 150px">请输入金额</label>' +
							'<div class="layui-input-inline">' +
							'<input type="text" id="money" lay-verify="email" autocomplete="off" class="layui-input">' +
							'</div>' +
							'<button type="button" class="layui-btn" onclick="getMoney()">充值</button>' +
							'<br><br>' +
							'</div>'
					,success: function(layero){

					}
				});
			}
		};

		$('#layerDemo .layui-btn').on('click', function(){
			var othis = $(this), method = othis.data('method');
			active[method] ? active[method].call(this, othis) : '';
		});


		//多窗口模式 - esc 键
		$(document).on('keyup', function(e){
			if(e.keyCode === 27){
				layer.close(layer.escIndex ? layer.escIndex[0] : 0);
			}
		});
	});
	function isNumber(val) {
		var regPos = /^\d+(\.\d+)?$/; //非负浮点数
		var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数
		if(regPos.test(val) || regNeg.test(val)) {
			return true;
		} else {
			return false;
		}
	}
	function getMoney() {
		let b=confirm("是否充值");
		if (b==false)return ;
		let money=$('#money').val();
		if (isNumber(money)==false){
			layui.use('layer',function () {
				layer.msg("充值失败");
			})
			return ;
		}
		if (money==''&&money.trim()==''){
			layui.use('layer',function () {
				layer.msg("不能输入为空");
			})
			return ;
		}
		if (money>100000){
			layui.use('layer',function () {
				layer.msg("一次性不得大于10万元");
			})
			return ;
		}
		$.post({
			url:'/addMoney',
			data:{
				'money':money
			},
			success:function (res) {
				if (res!=""){
					layui.use('layer',function () {
						layer.msg("充值成功");
						$("#pmonry").val(res)
					})
				}

			}
		})
	}
</script>
